import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() highlightColor = 'yellow';
  constructor(private el: ElementRef) {
    console.log('3.18', this.el);
  }

  @HostListener('mouseenter', ['$event']) onMouseEnter($event) {
    this.highlight(this.highlightColor);
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight('');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.background = color;
  }
}
